<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dom-结构-2</title>
</head>
<body>
<div class="box">

</div>
<div>
    <button onclick="return btnAddClick()">添加</button>
    <button onclick="return btnRemoveClick()">移除</button>
    <button onclick="return btnBeforeClick()">insertBefore</button>
    <button onclick="return changeChild()">改变子元素</button>
</div>
</body>
<script>

    /***
     *  1.选择器获得dom节点
     *  2. 创建子节点
     *  3. 把子节点放入父容器中
     * */


    function btnAddClick() {
        var box = document.getElementsByClassName('box')[0];

        var div1 = document.createElement('div');
        div1.innerText = "1";
        div1.id = "child1";
        box.appendChild(div1);
    }


    function btnRemoveClick() {
        var box = document.getElementsByClassName('box')[0];
        var div1 = document.getElementById('child1');

        box.removeChild(div1);
    }

    function btnBeforeClick() {

        var box = document.getElementsByClassName('box')[0];
        var newDiv = document.createElement('div');
        newDiv.innerText = "0";

        var div1 = document.getElementById('child1');
        box.insertBefore(newDiv, div1);
    }


    function changeChild() {
        var box = document.getElementsByClassName('box')[0];
        var children = box.children;
        //children[0].style.visibility = "hidden";
        var sibling= children[0].nextElementSibling;
       // sibling.style.visibility = "hidden";
        children[0].parentElement.style.visibility ="hidden";

    }


</script>
</html>